<template>
  <!-- 审计署统计报表-01表 -->
  <a-modal
    title="问题底稿查看"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :footer="null"
    @cancel="close"
    :destroyOnClose="true"
  >
    <a-spin :spinning="Loading">
      <div class="header-title">
        <span>
          第<span class="text-color-b">{{ currentIndex + 1 }}</span
          >条， 共有<span class="text-color-b">{{ total }}</span
          >条问题底稿
        </span>
        <a-button
          :disabled="currentIndex == 0"
          class="clear_btn"
          size="small"
          style="margin-left: 36px"
          @click="handleUp"
          >上一条</a-button
        >
        <a-button
          :disabled="currentIndex + 1 == total"
          type="primary"
          size="small"
          style="margin-left: 36px"
          @click="handleNext"
          >下一条</a-button
        >
      </div>
      <div class="table-header table-header-filx">
        <span class="table-title"
          ><span style="font-weight: 700; color: black; font-size: 15px">索引号：</span
          >{{ dataItem.syh }}（按需排版，唯一性）</span
        >
        <span class="table-title">第{{ currentIndex + 1 }}页（共{{ total }}页）</span>
      </div>
      <div :class="{ isCheck: isCheck }">
        <table class="table-box">
          <tr>
            <td style="text-align: center" class="col-title title">被审计单位</td>
            <td class="column" colspan="4">{{ dataItem.bsjdwName }}</td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title title">审计项目</td>
            <td class="column" colspan="4">{{ dataItem.projectName }}</td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title title">审计事项</td>
            <td class="column" colspan="4">{{ dataItem.itemName }}</td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title col-title-max title">疑点事项摘要</td>
            <td class="column quesition-item" colspan="4">
              <!-- <slot name="AuditSummaryQuestions" v-bind="dataItem"></slot> -->
              <template v-if="dataItem.dingxing">
                <p class="quesition-context"><span class="title">问题描述：</span>{{ dataItem.wtms }}</p>
                <p class="quesition-context"><span class="title">审计结论：</span>{{ dataItem.dingxing }}</p>
                <p class="quesition-context"><span class="title">规章制度：</span>{{ dataItem.gzzd }}</p>
                <p class="quesition-context"><span class="title">审计意见或建议：</span>{{ dataItem.xgjy }}</p>
              </template>
              <template v-else>
                <p class="quesition-context"><span class="title">疑点描述：</span>{{ dataItem.wtms }}</p>
                <p class="quesition-context"><span class="title">判断依据：</span>{{ dataItem.gzzd }}</p>
                <p class="quesition-context"><span class="title">相关建议：</span>{{ dataItem.xgjy }}</p>
              </template>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title title" colspan="2">日期</td>
            <td class="column" colspan="4"></td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title col-title-max title" rowspan="2">现场核实情况</td>
            <td class="column" colspan="4"></td>
          </tr>
          <tr>
            <td style="text-align: center" class="col-title title">核实人员（签字）</td>
            <td class="column"></td>
            <td style="text-align: center" class="col-title title">日期</td>
            <td class="column"></td>
          </tr>
        </table>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  name: 'QuestionPapers',
  data() {
    return {
      visible: false,
      disableSubmit: false,
      isCheck: true,
      Loading: false,
      data: {},
      dataItem: {},
      currentIndex: 0,
      total: 0,
    }
  },
  methods: {
    close() {
      this.visible = false
    },
    check(data) {
      this.data = data
      this.dataItem = data[0] || {}
      this.total = data.length
      this.currentIndex = 0
      this.visible = true
    },
    handleNext() {
      this.currentIndex += 1
      this.dataItem = this.data[this.currentIndex]
    },
    handleUp() {
      this.currentIndex -= 1
      this.dataItem = this.data[this.currentIndex]
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';
.table-header {
  margin-bottom: 10px;
  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.table-box {
  width: 100%;
  border-spacing: 0; /*把单元格间隙设置为0*/
  border-collapse: collapse;
  td {
    border: 1px solid black;
    font-size: 500;
    font-family: 宋体;
  }
  .col-title {
    width: 130px;
    height: 30px;
  }
  .col-title-max {
    height: 250px;
  }
  .quesition-item {
    vertical-align: sub;
    .quesition-context {
      margin: 10px 0px 0px 0px;
      padding: 0;
      text-indent: 2em;
    }
  }
}
.table-header-filx {
  display: flex;
  justify-content: space-between;
}
.title {
  color: black;
  font-weight: 700;
}
.header-title {
  // width: ;
  background-color: rgb(246, 246, 255);
  padding: 15px 30px;
  height: 55px;
  margin-bottom: 10px;
  font-size: 15px;
  .text-color-b {
    font-size: 18px;
    font-weight: 700;
    color: #2e4cba;
  }
}
</style>